<template>
    <div class="customerAnalysis-container">
      <div class="customerAnalysis-container-item userConcerns boederSet">
        <user-concerns :userConcernsData="userConcernsData" :productCode="productCode"></user-concerns>
      </div>
    </div>
</template>

<script>
  import UserConcerns from './userConcerns'
  import * as opreator from 'api/getData'

  export default {
    name: "customer-analysis",
    props:['productCode'],
    data() {
      return {
        userConcernsData: []
      }
    },
    components:{
      UserConcerns
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData(){
        opreator.referenceRate({ productCode:this.productCode }).then(res => {
          this.userConcernsData = res.data
        })
      }
    }
  }
</script>

<style scoped>
  .customerAnalysis-container{
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 5px;
    padding: 12px;
  }
  .userConcerns{
    margin-top: 12px;
  }
  .userDistribution-container{
    display: flex;
    flex-direction: row;
    padding: 0 12px 12px 12px;
  }
  .userDistribution-item-echarts{
    display: flex;
    flex: 5;
  }
  .userDistribution-item-table{
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .titleHeader{
    font-weight: bold;
  }
  .whiteContainerSet{
    background: white;
    padding: 0px;
    font-weight: 700;
  }
</style>
